<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 2016-01-11
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Test Data</title>
    <style>
        .hide {
            display: none;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
<div id="testData">
    <div v-for="(index,list) in list">
        <span v-if="list.pQuestId==0">{{list.name}}</span>
        <span v-else>
        <label v-if="list.pQuestId!=0 && list.type==4">
            <input type="checkbox" name="{{list.pQuestId}}" value="{{list.id}}"/>{{list.name}}
        </label>
        <label id="{{list.id}}" v-else>
            <span v-if="list.name.contains('不满意')">
                <input type="radio" name="{{list.pQuestId}}" value="{{list.id}}" @click="showInput(list)"/>{{list.name}}
            </span>
            <span v-else>
                 <input type="radio" name="{{list.pQuestId}}" value="{{list.id}}" v-else @click="hideInput(list)"/>{{list.name}}
            </span>
        </label>
            <input type="text" class="hide" v-if="list.name.contains('不满意')" id="notinput_{{list.id}}"/>
        </span>
    </div>
</div>
<script>
    var index;
    var testModel = new Vue({
        el: '#testData',
        data: {
            list: [
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "4",
                    "id": "55",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "您常用的移动装维功能是?(多选)",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "0"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "4",
                    "id": "56",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "A、工单收回单",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "55"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "4",
                    "id": "57",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "B、查询类工具",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "55"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "4",
                    "id": "58",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "C、测试类工具 ",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "55"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "4",
                    "id": "59",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "D、操作类工具",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "55"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "60",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "对移动装维系统提供的工单收回单功能是否满意?",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "0"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "61",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "A、非常满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "60"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "62",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "B、满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "60"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "64",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "C、不满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "60"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "65",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "对移动装维系统提供的查询类功能是否满意?",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "0"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "66",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "A、非常满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "65"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "67",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "B、满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "65"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "69",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "C、不满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "65"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "70",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "对移动装维系统提供的测试类功能是否满意?",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "0"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "71",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "A、非常满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "70"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "72",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "B、满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "70"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "74",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "C、不满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "70"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "76",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "对移动装维系统提供的操作类功能是否满意?",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "0"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "77",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "A、非常满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "76"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "78",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "B、满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "76"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "80",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "C、不满意",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "76"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "81",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "你觉得移动装维给你的工作带来了那些便利 ?",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "0"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "82",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "A、实时收回单",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "81"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "83",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "B、实时查询",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "81"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "84",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "C、在线变更端口、MAC ",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "81"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "1",
                    "id": "85",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "D、故障诊断",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "81"
                },
                {
                    "staffId": "",
                    "answers": "",
                    "state": "",
                    "type": "2",
                    "id": "86",
                    "source": "",
                    "answerInfo": "",
                    "answerInfoId": "",
                    "name": "您对移动装维系统的其他建议：",
                    "questIdNew": "",
                    "province": "",
                    "year": "",
                    "answerId": "",
                    "answerOption": "",
                    "pQuestId": "0"
                }
            ]
        },
        methods: {
            showInput: function (list) {
                index = list.id;
                $('#notinput_' + index).attr("class", "show");
            },
            hideInput: function (list) {
                $('#notinput_' + index).attr("class", "hide");
            }
        }
    })


    $(function () {

    })
</script>
</body>
</html>
